<template>
    <div class="box">
        <MkCard>
            <BaseSearchForm v-model:search-param="checkParam" @goBack="emit('goto-edit')" @search="search">
            </BaseSearchForm>
        </MkCard>
        <div class="box-body">
            <div class="box-left">
                <MkCard class="full-height">
                    <MkTable>
                        <MkColumnIndex />
                        <MkColumn prop="billNo" label="单号" width="80px" />
                        <MkColumn prop="huanZheXingMing" label="患者姓名" min-width="140px" />
                        <MkColumn prop="zhuYuanHao" label="住院号" />
                        <MkColumnXueYe />
                    </MkTable>
                </MkCard>
            </div>
            <div class="box-right">
                <MkCard class="full-height">
                    <flow-viewer ref="flowViewerRef" />
                </MkCard>
            </div>
        </div>
    </div>
</template>
<script setup lang="ts">
import flowViewer from '../../bas/basBiHuanTuSheJi/components/views/flowViewer.vue';

const flowViewerRef = ref();
  
  // 流程数据 - 从API获取或其他来源
  const flowData = {
  "nodeList": [
    {
      "type": "common",
      "nodeName": "输血申请",
      "icon": "UserOutlined",
      "textList": [],
      "bgColor": "",
      "fontColor": "black",
      "id": "common-490d01902b95452f8204473bef94b8f2",
      "height": 50,
      "x": 160,
      "width": 120,
      "y": 105
    },
    {
      "type": "common",
      "nodeName": "血型复核",
      "icon": "UserOutlined",
      "textList": [],
      "bgColor": "",
      "fontColor": "black",
      "id": "common-f0ec27fc269c46efa81fed72304e8436",
      "height": 50,
      "x": 360,
      "width": 120,
      "y": 105
    },
    {
      "type": "common",
      "nodeName": "交叉配血",
      "icon": "UserOutlined",
      "textList": [],
      "bgColor": "",
      "fontColor": "black",
      "id": "common-5848c9642ac64ce694480f148a1b3dc8",
      "height": 50,
      "x": 360,
      "width": 120,
      "y": 210
    },
    {
      "type": "common",
      "nodeName": "人工节点",
      "icon": "UserOutlined",
      "textList": [],
      "bgColor": "",
      "fontColor": "black",
      "id": "common-c0f0455aeb744476a3d5eed2d780438f",
      "height": 50,
      "x": 590,
      "width": 120,
      "y": 320
    },
    {
      "type": "common",
      "nodeName": "临床发血",
      "icon": "UserOutlined",
      "textList": [],
      "bgColor": "",
      "fontColor": "black",
      "id": "common-c510aeafaa7e42898ed298746f7179d0",
      "height": 50,
      "x": 360,
      "width": 120,
      "y": 320
    },
    {
      "type": "common",
      "nodeName": "人工节点",
      "icon": "UserOutlined",
      "textList": [],
      "bgColor": "",
      "fontColor": "black",
      "id": "common-98081dceefd34652957126c1621b3ba4",
      "height": 50,
      "x": 590,
      "width": 120,
      "y": 205
    },
    {
      "type": "y_lane",
      "nodeName": "医生站",
      "icon": "ColumnHeightOutlined",
      "bgColor": "rgb(200, 230, 202)",
      "fontColor": "black",
      "id": "y_lane-fcb461adb9bf4dfb8566b73ace5a6fb3",
      "height": 500,
      "x": 120,
      "width": 200,
      "y": 25
    },
    {
      "type": "y_lane",
      "nodeName": "护士站",
      "icon": "ColumnHeightOutlined",
      "bgColor": "rgb(144, 202, 248)",
      "fontColor": "black",
      "id": "y_lane-42da9a60f12f488e9ed20e1456835fe7",
      "height": 500,
      "x": 520,
      "width": 326,
      "y": 25
    },
    {
      "type": "y_lane",
      "nodeName": "输血科",
      "icon": "ColumnHeightOutlined",
      "bgColor": "rgb(158, 168, 219)",
      "fontColor": "black",
      "id": "y_lane-321137e3bb074df392c5748f93650973",
      "height": 500,
      "x": 320,
      "width": 200,
      "y": 25
    }
  ],
  "linkList": [
    {
      "type": "link",
      "id": "link-1937221ce467435e95dc67402d27b351",
      "sourceId": "common-490d01902b95452f8204473bef94b8f2",
      "targetId": "common-f0ec27fc269c46efa81fed72304e8436",
      "label": "",
      "cls": {
        "linkType": "Flowchart",
        "linkColor": "#2a2929",
        "linkThickness": 2
      }
    },
    {
      "type": "link",
      "id": "link-f591d906e6684c65bee4f39ef86c4b4e",
      "sourceId": "common-f0ec27fc269c46efa81fed72304e8436",
      "targetId": "common-5848c9642ac64ce694480f148a1b3dc8",
      "label": "",
      "cls": {
        "linkType": "Flowchart",
        "linkColor": "#2a2929",
        "linkThickness": 2
      }
    },
    {
      "type": "link",
      "id": "link-55fa8e442e0846389c6bcb53a090b639",
      "sourceId": "common-5848c9642ac64ce694480f148a1b3dc8",
      "targetId": "common-c510aeafaa7e42898ed298746f7179d0",
      "label": "",
      "cls": {
        "linkType": "Flowchart",
        "linkColor": "#2a2929",
        "linkThickness": 2
      }
    },
    {
      "type": "link",
      "id": "link-484e6d09c83944348375ce2501f19cb7",
      "sourceId": "common-c510aeafaa7e42898ed298746f7179d0",
      "targetId": "common-c0f0455aeb744476a3d5eed2d780438f",
      "label": "",
      "cls": {
        "linkType": "Flowchart",
        "linkColor": "#2a2929",
        "linkThickness": 2
      }
    }
  ],
  "attr": {
    "id": "flow-6047023edbd348c285acc9819420b2f2"
  },
  "config": {
    "showGrid": false,
    "showGridText": "显示网格",
    "showGridIcon": "EyeInvisibleOutlined"
  },
  "status": "2"
}

  onMounted(() => {
    // 加载流程数据
    flowViewerRef.value.loadFlow(JSON.stringify(flowData));
  });
</script>

<style lang='scss' scoped>
.box {
    height: 100vh;
    display: flex;
    flex-direction: column;

    .box-body {
        display: flex;
        flex-direction: row;
        flex: 1;
        overflow: hidden;

        .box-left {
            width: 35%;
            height: 100%;
        }

        .box-right {
            flex: 1;
            height: 100%;
        }

        .full-height {
            height: 95%;
            display: flex;
            flex-direction: column;
        }
    }
}
</style>